<template>
  <div>
    <Header></Header>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>月卡</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="pay(15)">去支付</el-button>
      </div>
      <div  class="text item">
        ￥15
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>季卡</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="pay(30)">去支付</el-button>
      </div>
      <div  class="text item">
        ￥30
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>年卡</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="pay(100)">去支付</el-button>
      </div>
      <div  class="text item">
        ￥100
      </div>
    </el-card>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  name: "ToVip.vue",
  components: {Header},
  data() {
    return {
      user:''
    }
  },
  methods:{
    pay(value){
      this.$axios.post('/pay/' + this.user.id+"/"+value).then(res => {
        if(res.data.code===200) {
          this.$message({
            showClose: true,
            message: '充值成功',
            type: 'success'
          });
        }else {
          this.$message.error("网络繁忙，充值失败");
        }
      })
    }
  },
  created() {
    const userId = this.$store.getters.getUser.id
    const _this = this
    if(userId) {
      this.$axios.get('/user/getUserById/' + userId).then(res => {
        const User = res.data.data
        this.user=User
      })
    }
  }
};
</script>
<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 200px;
}
</style>